<template>
  <div id="">
    <HeadNav type="admin" ref="head" :show="1"></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="admin" sort="adminAccess"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="powerType == 1">
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">
                  <a-tabs :activeKey="tabKey" @change="callback">
                    <a-tab-pane key="1" tab="用户访问"></a-tab-pane>
                    <a-tab-pane key="2" tab="页面访问"></a-tab-pane>
                  </a-tabs>
                </div>
              </div>
            </div>
            <!-- 用户访问统计 -->
            <div class="model-container" v-if="tabKey == '1'">
              <div class="model-bg" style="
                  min-height: 420px;
                  padding-bottom: 75px;
                  position: relative;
                ">
                <div class="section-title">用户访问统计</div>
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="330" />
                      <col width="120" />
                      <col width="120" />
                      <col width="120" />
                      <col width="120" />
                      <col width="120" />
                      <col width="120" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>日期</td>
                        <td style="text-align: right">PC访问机构数</td>
                        <td style="text-align: right">PC访问用户数</td>
                        <td style="text-align: right">PC访问次数</td>
                        <td style="text-align: right">PC人均访问次数</td>
                        <td style="text-align: right">小程序访问用户数</td>
                        <td style="text-align: right">小程序访问次数</td>
                      </tr>
                    </thead>
                    <tbody v-if="userCountList.length > 0">
                      <tr v-for="(item,index) in userCountList" :key="index">
                        <td>
                          <span class="main-font">{{item.date}}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{item.organization_nums}}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{item.pc_user_nums}}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{item.pc_view_nums}}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{item.pc_view_avg}}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{item.wx_user_nums}}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{item.wx_view_nums}}</span>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="7" style="text-align: center">
                          <div style="margin-top: 70px"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div
                  v-if="tabKey == '1'"
                  style="position: absolute; right: 15px; bottom: 15px"
                >
                  <a-pagination
                    :show-total="(total) => `共 ${total} 条数据`"
                    :default-current="1"
                    v-model="upage"
                    :total="utotal"
                    :defaultPageSize="upageSize"
                    @change="uSizeChange"
                  />
                </div>
              </div>
            </div>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 600px;
                  position: relative;
                  padding-bottom: 75px;
                "
              >
                <div class="section-title">
                  <span v-if="tabKey == '1'">用户访问数据</span>
                  <span v-if="tabKey == '2'">页面访问数据</span>
                </div>
                <!-- 页面访问数据列表 -->
                <div class="table" v-if="tabKey == '2'">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="50" />
                      <col width="290" />
                      <col width="120" />
                      <col width="120" />
                      <col width="120" />
                      <col width="120" />
                      <col width="230" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>序号</td>
                        <td>页面名称</td>
                        <td style="text-align: right">最近7天查询量</td>
                        <td style="text-align: right">最近7天查询人数</td>
                        <td style="text-align: right">累计查询量</td>
                        <td style="text-align: right">累计查询人数</td>
                        <td style="text-align: right">最近查询记录</td>
                      </tr>
                    </thead>
                    <tbody v-if="pageList.length > 0">
                      <tr v-for="(item, index) in pageList" :key="index">
                        <td>
                          <span class="main-font">{{ index + 1 }}</span>
                        </td>
                        <td>
                          <span class="main-font">{{ item.page_name }}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{
                            item.recently_views
                          }}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{
                            item.recently_users
                          }}</span>
                        </td>
                        <td style="text-align: right">{{ item.all_views }}</td>
                        <td style="text-align: right">{{ item.all_users }}</td>
                        <td style="text-align: right">
                          <span class="main-font"
                            >{{ item.last_view_info.account }}（{{
                              item.last_view_info.mobile
                            }}）</span
                          >
                          <div>{{ item.last_view_info.date_time }}</div>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="7" style="text-align: center">
                          <div style="margin-top: 130px"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 用户访问数据列表 -->
                <div class="table" v-if="tabKey == '1'">
                  <div style="padding: 20px 0">
                    <a-select
                      v-model="searchSort"
                      style="width: 220px"
                      @change="handleChange"
                    >
                      <a-select-option value="last_view"
                        >按最近查询记录排序</a-select-option
                      >
                      <a-select-option value="recently_all"
                        >按最近页面访问量排序</a-select-option
                      >
                      <a-select-option value="recently_realtime"
                        >按最近实时刷新量排序</a-select-option
                      >
                    </a-select>
                    <a-select
                      v-model="terminal"
                      style="width: 120px; margin-left: 5px"
                      @change="handleChange1"
                    >
                      <a-select-option value="pc">PC端数据</a-select-option>
                      <a-select-option value="wx端"
                        >小程序端数据</a-select-option
                      >
                    </a-select>
                    <a-select
                      v-model="accountType"
                      style="width: 120px; margin-left: 5px"
                      @change="handleChange2"
                    >
                      <a-select-option value="2">机构级用户</a-select-option>
                      <a-select-option value="1">平台级用户</a-select-option>
                    </a-select>
                    <!-- 机构 -->
                    <a-auto-complete
                      option-label-prop="value"
                      style="width: 230px; margin-left: 5px"
                      placeholder="搜索机构"
                      @search="onAddSearch"
                      :defaultActiveFirstOption="false"
                      v-model="modelOrganize"
                      @select="selected"
                      @blur="organizeBlur"
                    >
                      <template slot="dataSource">
                        <a-select-option
                          v-for="(opt, index) in dataSource"
                          :key="index"
                          :value="opt.organization_name"
                        >
                          <div class="result">
                            <span>{{ opt.organization_name }}</span>
                          </div>
                        </a-select-option>
                      </template>
                    </a-auto-complete>
                    <!-- 用户 -->
                    <a-auto-complete
                      option-label-prop="value"
                      style="width: 200px; margin-left: 5px"
                      placeholder="搜索手机号"
                      @search="onUserSearch"
                      :defaultActiveFirstOption="false"
                      v-model="modelUser"
                      @select="userSelected"
                      @blur="userBlur"
                    >
                      <template slot="dataSource">
                        <a-select-option
                          v-for="(opt, index) in dataSource1"
                          :key="index"
                          :value="opt.mobile"
                        >
                          <div class="result">
                            <span>{{ opt.mobile }}</span>
                          </div>
                        </a-select-option>
                      </template>
                    </a-auto-complete>
                  </div>
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="45" />
                      <col width="275" />
                      <col width="115" />
                      <col width="115" />
                      <col width="100" />
                      <col width="230" />
                      <col width="160" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>序号</td>
                        <td>用户信息</td>
                        <td style="text-align: right">最近7天实时刷新</td>
                        <td style="text-align: right">最近7天页面访问</td>
                        <td style="text-align: right">累计页面访问</td>
                        <td style="text-align: right">最常访问页面</td>
                        <td style="text-align: right">最近查询记录</td>
                      </tr>
                    </thead>
                    <tbody v-if="userList.length > 0">
                      <tr v-for="(item, index) in userList" :key="index">
                        <td>
                          <span class="main-font">{{
                            index + 1 + (pageSize * page - pageSize)
                          }}</span>
                        </td>
                        <td>
                          <span class="main-font"
                            >{{ item.name }}（{{
                              item.user_type == 1
                                ? "平台级"
                                : item.organization_name
                            }}-{{ item.mobile }}）</span
                          >
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{
                            item.recently_realtime_views
                          }}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{
                            item.recently_views
                          }}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{ item.all_views }}</span>
                        </td>
                        <td style="text-align: right">
                          <span v-if="item.most_view">{{
                            item.most_view
                          }}</span>
                          <span v-else>--</span>
                        </td>
                        <td style="text-align: right">
                          <div v-if="item.last_view_info.page_name">
                            <span class="main-font">{{
                              item.last_view_info.page_name
                            }}</span>
                            <div>{{ item.last_view_info.date_time }}</div>
                          </div>
                          <div v-else style="line-height: 36px">--</div>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="7" style="text-align: center">
                          <div style="margin-top: 130px"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div
                  v-if="tabKey == '1'"
                  style="position: absolute; right: 15px; bottom: 15px"
                >
                  <a-pagination
                    :show-total="(total) => `共 ${total} 条数据`"
                    :default-current="1"
                    v-model="page"
                    :total="total"
                    :defaultPageSize="pageSize"
                    @change="onShowSizeChange"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading || uLoading"></Loading>
  </div>
</template>
<script>
import { VISITDATA_PAGE, VISITDATA_USER,VISITDATA_USERDAYSTAT } from "../../apis/inquire.js";
import { ORGANIZATION_GETS, USER_GETSINCLUDE } from "../../apis/admin.js";
export default {
  data() {
    return {
      powerType: 1,
      tabKey: "1",
      userCountList:[],
      pageList: [],
      userList: [],
      upage:1,
      utotal:0,
      upageSize:10,
      page: 1,
      total: 0,
      pageSize: 20,
      isLoading: true,
      uLoading: true,
      searchSort: "last_view",
      terminal: "pc",
      accountType: "2",
      dataSource: [],
      dataSource1: [],
      lastOrganize: "",
      lastUser: "",
      modelOrganize: "",
      modelUser: "",
      searchInfo: {
        user_id: 0,
        mobile: "",
        organize_name: "",
        organize_id: "",
      },
    };
  },
  mounted() {
    this.powerType = this.$refs.head.accountInfo.type;
    if (this.$route.query.user_id) {
      this.searchInfo.user_id = this.$route.query.user_id;
      this.searchInfo.mobile = this.$route.query.mobile;
      this.modelUser = this.$route.query.mobile;
      this.lastUser = this.$route.query.mobile;
    }
    this.getUserCount();
    this.getData();
  },
  methods: {
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        page: this.page,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      if (this.tabKey == "1") {
        data.terminal = this.terminal;
        data.sort = this.searchSort;
        if (this.searchInfo.organize_id) {
          data.organization_id = this.searchInfo.organize_id;
        }
        if (this.searchInfo.user_id) {
          data.user_id = this.searchInfo.user_id;
        }
        data.user_type = this.accountType;
      }
      data.sign = this.$getSign(data);
      let res;
      if (this.tabKey == "1") {
        res = await VISITDATA_USER(data);
      } else if (this.tabKey == "2") {
        res = await VISITDATA_PAGE(data);
      }
      if (res.code == 0) {
        this.powerType = 1;
        if (this.tabKey == "1") {
          this.userList = [];
          this.total = res.data.count;
          this.userList = res.data.list;
        } else if (this.tabKey == "2") {
          this.pageList = [];
          this.pageList = res.data;
        }
        this.isLoading = false;
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.powerType = 2;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取用户访问统计
    async getUserCount() {
      var tStamp = this.$getTimeStamp();
      let data = {
        page: this.upage,
        page_size: this.upageSize,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await VISITDATA_USERDAYSTAT(data);
      if (res.code == 0) {
        this.userCountList = [];
        this.utotal = res.data.total;
        this.userCountList = res.data.list;
        this.$nextTick(()=>{
          this.uLoading = false;
        })
      } else {
        this.uLoading = false;
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 获取机构列表
    async getOrganizeList(value) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_name: value,
        organization_state: 1,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await ORGANIZATION_GETS(data);
      if (res.code == 0) {
        this.dataSource = [];
        this.dataSource = res.data.lists;
      } else {
        // this.isLoading = false;
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 获取用户列表
    async getUserList(value) {
      var tStamp = this.$getTimeStamp();
      let data = {
        user_mobile: value,
        user_state: 1,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await USER_GETSINCLUDE(data);
      if (res.code == 0) {
        this.dataSource1 = [];
        res.data.lists.map((val, key) => {
          let _obj = val;
          _obj.mobile = _obj.mobile.toString();
          this.dataSource1.push(_obj);
        });
      } else {
        this.isLoading = false;
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    callback(key) {
      this.tabKey = key;
      this.isLoading = true;
      this.page = 1;
      if(this.tabKey == '1'){
        this.upage = 1;
        this.uLoading = true;
        this.getUserCount();
      }
      this.getData();
    },
    uSizeChange(page){
      this.uLoading = true;
      this.upage = page;
      this.getUserCount();
    },
    onShowSizeChange(page, pageSize) {
      this.isLoading = true;
      this.page = page;
      this.getData();
    },
    handleChange(value) {
      this.searchSort = value;
      this.isLoading = true;
      this.page = 1;
      this.getData();
    },
    handleChange1(value) {
      this.terminal = value;
      this.isLoading = true;
      this.page = 1;
      this.getData();
    },
    handleChange2(value) {
      this.accountType = value;
      this.isLoading = true;
      this.page = 1;
      this.getData();
    },
    // 机构搜索
    onAddSearch(value) {
      let _value = value.toString();
      this.dataSource = [];
      this.searchInfo.organize_name = "";
      this.searchInfo.organize_id = "";
      this.getOrganizeList(_value);
    },
    // 选中出版社
    selected(value) {
      this.dataSource.map((val, key) => {
        if (val.organization_name == value) {
          this.searchInfo.organize_name = val.organization_name;
          this.searchInfo.organize_id = val.organization_id;
          this.lastOrganize = val.organization_name;
        }
      });
      this.isLoading = true;
      this.page = 1;
      this.getData();
    },
    // 失去焦点
    organizeBlur() {
      if (!this.searchInfo.organize_id && this.modelOrganize.length > 0) {
        this.modelOrganize = this.lastOrganize;
      } else {
        if (this.lastOrganize !== this.modelOrganize) {
          this.isLoading = true;
          this.getData();
        }
      }
    },
    userBlur() {
      if (!this.searchInfo.user_id && this.modelUser.length > 0) {
        this.modelUser = this.lastUser;
      } else {
        if (this.lastUser !== this.modelUser) {
          this.isLoading = true;
          this.getData();
        }
      }
    },
    // 用户搜索
    onUserSearch(value) {
      let _value = value.toString();
      this.dataSource = [];
      this.searchInfo.user_id = 0;
      this.searchInfo.mobile = "";
      this.getUserList(_value);
    },
    // 选中用户
    userSelected(value) {
      this.dataSource1.map((val, key) => {
        if (val.mobile == value) {
          this.searchInfo.user_id = val.user_id;
          this.searchInfo.mobile = val.mobile;
          this.lastUser = val.mobile;
        }
      });
      this.isLoading = true;
      this.page = 1;
      this.getData();
    },
  },
};
</script>